<template>
  <div>
    <div class="mainCon abblity">
      <div class="containercontent">
        <div class="seachTip selectw100">
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              能力参数
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-input v-model="searchName" size="mini" placeholder="能力参数名称" @keyup.enter.native="readAbility(abilityQuery,'search')" clearable></el-input>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              检测项目
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select size="mini" v-model="itemValue" @change="readAbility(abilityQuery,'search')" clearable  filterable>
                <el-option v-for="item in allItem" :key="item.item" :label="item.itemName" :value="item.item">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              检测项分组
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select v-model="groupValue" placeholder="请选择检测项目分组" size="mini" @change="readAbility(abilityQuery,'search')" clearable>
                <el-option v-for="item in groupSelect.itemList" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              状 态
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select v-model="enableStatusValue" size="mini" @change="readAbility(abilityQuery,'search')"  placeholder = "能力参数状态" clearable>
                <el-option v-for="item in enableStatus" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>


        </div>
        <div class="seachTip selectw100">
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              采样要求
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select v-model="isExistSample" size="mini" @change="readAbility(abilityQuery,'search')" placeholder = "是否已设置采样容器" clearable>
                <el-option key="1" label="是" value="1"></el-option>
                <el-option key="0" label="否" value="0"></el-option>
              </el-select>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              维护仪器
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select v-model="isExistEquip" size="mini" @change="readAbility(abilityQuery,'search')" placeholder = "是否已设置仪器" clearable>
                <el-option key="1" label="是" value="1"></el-option>
                <el-option key="0" label="否" value="0"></el-option>
              </el-select>
            </div>
          </div>

           <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              默认检测人
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select v-model="isExistInspector" size="mini" @change="readAbility(abilityQuery,'search')"  placeholder = "是否已设置检测人" clearable>
                <el-option key="1" label="是" value="1"></el-option>
                <el-option key="0" label="否" value="0"></el-option>
              </el-select>
            </div>
          </div>

          <div class="inlineblock basicRightDistanceA searchIcon">
            <el-button size="mini" @click="readAbility(abilityQuery,'search')">搜索</el-button>
            <el-button size="mini" @click="emptySearch">清空</el-button>
          </div>
        </div>
        <div class="separaterowTable" style="height:calc(100% - 100px)">
          <div class="tableTittle">
            <div>
              <span class="fontImpact">1</span>
              <span>能力参数</span>
            </div>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addAbility()" style="float:right" v-if="userOpernation.add.display">添加</el-button>
            <!--复制新增有个问题，检测项不能复制过去，如果要这个功能，记得修改-->
            <!--<el-button type="primary" icon="el-icon-plus" size="mini" @click="editAbility({id:copeId},'copy')" style="float:right;margin-right:10px;" v-if = "userOpernation.add.display">复制新增</el-button>-->
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="chooseDetectability" style="float:right;margin-right:10px;" v-if="userOpernation.init.display">选择</el-button>
          </div>
          <el-table :data="abilityTableDate" style="width: 100%" size="mini" class="tableCon selectTable" @select="selectRow" :cell-class-name="tableRowClassName">
            <!--<el-table-column fixed type="selection" width="38px">
                </el-table-column>-->
            <el-table-column label="序号" min-width="50px">
              <template slot-scope="scope">
                {{scope.$index+(abilityQuery.page - 1) * abilityQuery.pageCount + 1}}
              </template>
            </el-table-column>
            <el-table-column property="name" label="能力参数" min-width="200px" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column property="detectObject" label="检测对象" :formatter="objectFormatter" min-width="100px">
            </el-table-column>
            <el-table-column property="group" label="分组" :formatter="groupFormatter" min-width="150px">
            </el-table-column>
            
            <el-table-column property="cnasStatus" label="CNAS资质" min-width="90px">
              <template slot-scope="scope">
                <el-checkbox :true-label=1  :false-label=0 v-model="scope.row.cnasStatus"  disabled></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column property="cmaStatus" label="CMA资质" min-width="90px">
              <template slot-scope="scope">
                <el-checkbox :true-label=1  :false-label=0  v-model="scope.row.cmaStatus"   disabled></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column property="version" label="版本号" min-width="80px">
            </el-table-column>
            <el-table-column property="status" label="状态" min-width="80px" :formatter="formatter">
            </el-table-column>
            <el-table-column label="操作" min-width="200px" v-if="somePageOpera || isShowOperate">
              <template slot-scope="scope">
                <!--1 编辑 2 详情 3 启用 4停用 5删除-->
                <el-button v-if="showOperate(4,scope.row.status) && userOpernation.disable.display" type="text" size="mini" @click="isStart(scope.row)">停用</el-button>
                <el-button v-if="showOperate(3,scope.row.status) && userOpernation.enable.display" type="text" size="mini" @click="isStart(scope.row)">启用</el-button>
                <el-button v-if="scope.row.isApprove" type="text" size="mini" @click="editAbility(scope.row,'review')">审核</el-button>
                <el-button @click="editAbility(scope.row,'edit')" type="text" size="mini" v-if="userOpernation.update.display && showOperate(1,scope.row.status)">编辑</el-button>
                <el-button @click="editAbility(scope.row,'edit')" type="text" size="mini" v-if="(userOpernation.openUpdate.display || userOpernation.version.display) && showOperate(10,scope.row.status)">编辑</el-button>
                <el-button @click="editAbility(scope.row,'look')" v-if="userOpernation.select.display && showOperate(2,scope.row.status)" type="text" size="mini">详情</el-button>
                <el-button @click="deleteAbility(scope.row)" type="text" size="mini" v-if="userOpernation.delete.display && showOperate(5,scope.row.status)" :disabled="scope.row.source !='' && scope.row.source != undefined ">删除</el-button>

              </template>
            </el-table-column>
          </el-table>
          <div class="block changepages">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="abilityQuery.page" :page-sizes="[20,30,40]" :page-size="abilityQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
            </el-pagination>
          </div>
        </div>
      </div>
      <!-- 能力参数详情 查看编辑 -->
      <!--<div v-if="abilityDetailShow">-->
      <ability-add :addVisible.sync="abilityDetailShow" :canEdit.sync="canEdit" :newOrEdit.sync="newOrEdit" :abilityDetail="abilityDetail" :itemList="itemList" :equipmentList="equipmentList" :QcPlanList="QcPlanList"></ability-add>
      <!--</div>-->
    </div>
    <ability-choose :addVisible.sync="abilitychooseShow" @readAbility="readAbility"></ability-choose>

  </div>
</template>

<script>
import { mapState } from 'vuex'
const abilityAdd = () => import('./children/abilityAdd.vue');
const abilityChoose = () => import('./children/abilityChoose.vue');


export default {
  data() {
    return {
      abilityQuery: {
        page: 1, //第几页
        pageCount: 20, //页面得记录条数，
      },
      rowNumber: 0,
      groupValue: '',
      searchName: '',
      isExistEquip: '', //是否存在维护仪器
      isExistInspector: '', // 是否存在默认检测人
      isExistSample: '', //是否存在采样要求
      abilityTableDate: [],
      groupList: '',
      detecAllVersion: [],
      abilityDetail: {},
      newOrEdit: 'new',
      oldRow: null,
      selectOldRow: null,
      copeId: '',
      itemList: [],  //检测项目数据
      equipmentList: [], //仪器数据
      QcPlanList: [], //质控计划数据
      abilitychooseShow: false,
      isShowOperate: true, //根据审核按钮判断是都显示操作栏
      somePageOpera: true, //根据操作栏的增删改查是否显示操作栏
      enableStatusValue: '',
      allItem:[],
      itemValue:"",

      sampleTypeValue: '',
      typeofAbilityTableDateValue: '',
      abilityDetailShow: false,
      currentPage: 1,
      methodsTableDateValue: '',
      analysisItemTableDateValue: '',
      fuzhiFlag: false,
      canEdit: false,
    }
  },
  components: {
    abilityAdd, abilityChoose
  },
  props: ['userOpernation'],
  computed: {
    ...mapState(['daibanItemShow', 'daibanItem', 'enableStatus', 'typeofAbilityTableDate', 'yesorno', 'methodsTableDate', 'analysisItemTableDate', 'groupSelect', 'objectSelect']),
    analytableHeight() {
      return (window.innerHeight - 370)
    }
  },
  created() {
    if (this.daibanItemShow) {
      this.editAbility(this.daibanItem, 'review')
      this.$store.commit('passDaibanItemShow', false)
    }
  },
  mounted() {
    this.readAbility(this.abilityQuery)
    this.$store.dispatch('dogetDictionary') //接收vuestore里面数据字典数据
    this.somePageOpera = this.util.operate({ delete: this.userOpernation.delete, update: this.userOpernation.update, disable: this.userOpernation.disable, enable: this.userOpernation.enable, select: this.userOpernation.select })
     this.readAllItem()
  },
  watch: {
    daibanItem(newer, older) {
      if (this.daibanItemShow) {
        this.editAbility(this.daibanItem, 'review')
        this.$store.commit('passDaibanItemShow', false)
      }
    },
    abilityQuery: {
      handler(val, oldVal) {
        this.readAbility(this.abilityQuery)
      },
      deep: true
    },
  },
  methods: {
	  tableRowClassName({ row, column, rowIndex, columnIndex }) {
		  if (row.status == 0 && columnIndex == 5) {
			  return "colorRed"
		  }
	  },
    // 添加编辑弹框 搜索检测项目
    readAllItem() {
      this.$http({
        method: 'post',
        apiUrl: '/technology/getItemsByDete.htm',
        params: { name: '' },
        isJson: true
      }).then(res => {
        if (res.code == 0) {
          this.allItem = res.data;
        }

      })
    },
    showOperate(oper, status) {
      if (oper == 1) { //编辑
        if (status == 2 || status == 4) { //草稿状态下显示编辑按钮
          return true;
        }
      }
      if (oper == 10) {
        if (status == 1) {
          return true;
        }
      }
      if (oper == 2) { //详情 按钮都显示
        return true;
      }
      if (oper == 3) { //启用
        if (status == 0) { //停用状态显示启用按钮
          return true;
        }
      }
      if (oper == 4) { //停用
        if (status == 1) { //启用状态显示停用按钮
          return true;
        }
      }
      if (oper == 5) { //删除
        if (status != 3) { //待审核  除了待审核 都显示删除按钮
          return true;
        }
      }
    },

    emptySearch() {
      this.searchName = '';
      this.groupValue = '';
      this.enableStatusValue = '';
      this.isExistEquip = '';
      this.isExistInspector = '';
      this.isExistSample = '';
       this.itemValue = "";
      this.readAbility(this.abilityQuery, 'search')
    },
    formatter(row, column, cellValue) {
      return this.util.changeStatus({ cellValue: cellValue, list: this.enableStatus })
    },
    // 过滤分组设置
    groupFormatter(row, column, cellValue, index) {
      return this.util.codeChangeName({ cellValue: cellValue, list: this.groupSelect.itemList })
    },
    objectFormatter(row, column, cellValue, index) {
      return this.util.codeChangeName({ cellValue: cellValue, list: this.objectSelect.itemList });
    },
    // 查看能力参数列表
    readAbility(parp, search) {
      var params = {
        name: this.searchName,
        group: this.groupValue,
        isExistEquip: this.isExistEquip,
        isExistInspector: this.isExistInspector,
        isExistSample: this.isExistSample,
        status:this.enableStatusValue,
        item:this.itemValue,
      }
      if (search != undefined) {
        this.abilityQuery.page = 1;
        params.page = 1;
        params.pageCount = parp.pageCount;
      } else {
        params.page = parp.page;
        params.pageCount = parp.pageCount;
      }
      this.$http({
        method: 'post',
        apiUrl: '/technology/readDetectabilityList.htm',
        params: params,
        isJson: false,
      }).then(res => {
        if (res.code === 0) {
          res.data.forEach(function(item) {
            item.check = false;
          })
          this.abilityTableDate = res.data;
          this.isShowOperate = this.util.showOpreta({ data: res.data })
          if (!res.pageinfo) {
            this.rowNumber = 0;
          } else if (res.pageinfo && !res.pageinfo.rowNumber) {
            this.rowNumber = 0;
          } else {
            this.rowNumber = res.pageinfo.rowNumber;
          }
        }
      })
    },
    editAbility: function(row, newOrEdit) {
      this.canEdit = true;
      this.newOrEdit = newOrEdit;
      if (newOrEdit == 'look' || newOrEdit == "review") {
        this.canEdit = false;
      } else {
        this.canEdit = true;
      }
      if ((row.id == '' || row.id == null) && newOrEdit == 'copy') {
        this.$message({
          type: 'info',
          message: '请先选择一个能力参数'
        });
      } else {

        this.$http({
          method: 'post',
          apiUrl: '/technology/readDetectability.htm',
          params: {
            id: row.id
          },
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            this.abilityDetail = res.data;
            this.abilityDetailShow = true;
          }
        })





      }



    },
    //删除能力参数
    deleteAbility(row) {
      this.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var that = this;
        var param = {
          id: row.id,
        }
        this.$http({
          apiUrl: '/technology/deleteDetectability.htm',
          type: 'post',
          params: param,
        }).then(res => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.readAbility(this.abilityQuery)
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //启用或者停用方法
    isStart(row) {
      var msg = row.status == 0 ? "启用" : "停用";
      this.$confirm("是否" + msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          method: 'post',
          apiUrl: '/technology/updateDetectabilityStatus.htm',
          params: {
            id: row.id,
            status: row.status == 0 ? 1 : 0,
          },
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            this.readAbility(this.abilityQuery)
          }

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' + msg
        });
      });
    },

    selectRow(selection, row) {
      if (selection.length > 1) {
        selection.shift()
      }
      if (this.selectOldRow && this.selectOldRow != row) {
        this.selectOldRow.check = false;
      }
      row.check = !row.check;
      this.selectOldRow = row;
      if (row.check && selection.length > 0) {
        this.copeId = row.id
      } else {
        this.copeId = null;
      }
    },
    handleSizeChange: function(val) {
      this.abilityQuery.pageCount = val;
    },
    handleCurrentChange: function(val) {
      this.abilityQuery.page = val;
    },
    chooseDetectability() {
      this.abilitychooseShow = true;
    },
    addAbility() {
      this.newOrEdit = "new";
      this.abilityDetailShow = true;

      this.canEdit = true;

    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.seachTip .infoitem {
  width: calc(100%/4 - 10px);
}

.seachTip .informationItem {
  width: calc(100% - 100px);
}
</style>
<style>
.selectTable .el-table__header thead th:nth-of-type(1) .cell {
  display: none;
}
.abblity .colorRed{
  color:red
}
</style>
